C.S.Burner 🪙 ━►🔥GIT Node

T8b949e

Tff7b72<templateTff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"Ta5d6ffabsolute top-2 left-2 right-2 sm:top-4 sm:left-4 sm:right-4 z-10 flex flex-col sm:flex-row gap-2 pointer-events-noneTa5d6ff"

Tff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"Ta5d6ffpointer-events-auto border border-gray-200/50 dark:border-zinc-800/50 bg-white/90 dark:bg-zinc-900/90 rounded-2xl overflow-hidden w-full sm:w-[280px] sm:max-w-[280px] transition-all duration-300Ta5d6ff"

Tff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"Ta5d6ffflex items-center px-4 sm:px-5 py-3 sm:py-4 cursor-pointer hover:bg-gray-50/50 dark:hover:bg-zinc-800/50 transition-colorsTa5d6ff"

@Te6edf3click=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffupdate:isShowingControlsTa5d6ff'Ta5d6ff, !isShowingControls)Ta5d6ff"

Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex-1 flex flex-col min-w-0 mr-2Ta5d6ff"Tff7b72>

Tff7b72<span Te6edf3class=Ta5d6ff"Ta5d6fffont-bold text-gray-900 dark:text-zinc-100 tracking-tight truncateTa5d6ff"Tff7b72>{{

Te6edf3$t("visualiser.reticulum_mesh")

}}Tff7b72</span>

Tff7b72<span

Te6edf3class=Ta5d6ff"Ta5d6fftext-[10px] uppercase font-bold text-gray-500 dark:text-zinc-500 tracking-widest truncateTa5d6ff"

Tff7b72>{{ Te6edf3$t("visualiser.network_visualizer") }}Tff7b72</span

>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex items-center gap-2Ta5d6ff"Tff7b72>

Tff7b72<button

Te6edf3type=Ta5d6ff"Ta5d6ffbuttonTa5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffinline-flex items-center justify-center w-8 h-8 sm:w-9 sm:h-9 rounded-xl bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700 text-white transition-all active:scale-95 disabled:opacity-60Ta5d6ff"

Te6edf3:disabled=Ta5d6ff"Ta5d6ffisUpdating || isLoadingTa5d6ff"

Te6edf3:aria-label=Ta5d6ff"Te6edf3$tTa5d6ff(Ta5d6ff'Ta5d6ffvisualiser.refreshTa5d6ff'Ta5d6ff)Ta5d6ff"

@click.Te6edf3stop=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffmanual-updateTa5d6ff'Ta5d6ff)Ta5d6ff"

Tff7b72>

Tff7b72<MaterialDesignIcon

Te6edf3:icon-name=Ta5d6ff"Ta5d6ffisLoading ? Ta5d6ff'Ta5d6ffloadingTa5d6ff'Ta5d6ff : Ta5d6ff'Ta5d6ffrefreshTa5d6ff'Ta5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffw-4 h-4 sm:w-5 sm:h-5Ta5d6ff"

Te6edf3:class=Ta5d6ff"Ta5d6ff{ Ta5d6ff'Ta5d6ffanimate-spinTa5d6ff'Ta5d6ff: isLoading }Ta5d6ff"

Tff7b72/>

Tff7b72</button>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffw-5 sm:w-6 flex justify-centerTa5d6ff"Tff7b72>

Tff7b72<MaterialDesignIcon

Te6edf3icon-name=Ta5d6ff"Ta5d6ffchevron-downTa5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffw-4 h-4 sm:w-5 sm:h-5 text-gray-400 transition-transform duration-300Ta5d6ff"

Te6edf3:class=Ta5d6ff"Ta5d6ff{ Ta5d6ff'Ta5d6ffrotate-180Ta5d6ff'Ta5d6ff: isShowingControls }Ta5d6ff"

Tff7b72/>

Tff7b72</div>

Tff7b72<div

Te6edf3v-show=Ta5d6ff"Ta5d6ffisShowingControlsTa5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffpx-5 pb-5 space-y-4 animate-in fade-in slide-in-from-top-2 duration-300Ta5d6ff"

Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffh-px bg-linear-to-r from-transparent via-gray-200 dark:via-zinc-800 to-transparentTa5d6ff"Tff7b72>Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffgrid grid-cols-2 gap-2Ta5d6ff"Tff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"Ta5d6ffrelative min-w-0 rounded-xl px-3 py-2 border border-gray-100 dark:border-zinc-700/50 bg-gray-50/60 dark:bg-zinc-800/40Ta5d6ff"

Te6edf3:title=Ta5d6ff"Ta5d6ffengineSelectTitleTa5d6ff"

Tff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"Ta5d6fftext-[10px] font-bold text-gray-500 dark:text-zinc-500 uppercase tracking-wider mb-0.5Ta5d6ff"

Tff7b72>

Tff7b72</div>

Tff7b72<button

Te6edf3id=Ta5d6ff"Ta5d6ffvisualiser-engine-selectTa5d6ff"

Te6edf3type=Ta5d6ff"Ta5d6ffbuttonTa5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffflex w-full min-w-0 items-center gap-1 bg-transparent text-left text-xs font-bold focus:outline-hidden focus-visible:ring-1 focus-visible:ring-blue-500/50 roundedTa5d6ff"

Te6edf3:class=Ta5d6ff"Ta5d6ffengineSelectClassTa5d6ff"

Te6edf3:aria-label=Ta5d6ff"Te6edf3$tTa5d6ff(Ta5d6ff'Ta5d6ffvisualiser.engineTa5d6ff'Ta5d6ff)Ta5d6ff"

Te6edf3:aria-expanded=Ta5d6ff"Ta5d6ffengineMenuOpen ? Ta5d6ff'Ta5d6fftrueTa5d6ff'Ta5d6ff : Ta5d6ff'Ta5d6fffalseTa5d6ff'Ta5d6ff"

Te6edf3aria-haspopup=Ta5d6ff"Ta5d6fflistboxTa5d6ff"

@click.Te6edf3stop=Ta5d6ff"Ta5d6fftoggleEngineMenuTa5d6ff"

Tff7b72>

Tff7b72<span Te6edf3class=Ta5d6ff"Ta5d6ffmin-w-0 flex-1 truncateTa5d6ff"Tff7b72>{{ engineTriggerLabel }}Tff7b72</span>

Tff7b72<MaterialDesignIcon

Te6edf3icon-name=Ta5d6ff"Ta5d6ffchevron-downTa5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffw-3.5 h-3.5 shrink-0 text-gray-400 transition-transform duration-200Ta5d6ff"

Te6edf3:class=Ta5d6ff"Ta5d6ff{ Ta5d6ff'Ta5d6ffrotate-180Ta5d6ff'Ta5d6ff: engineMenuOpen }Ta5d6ff"

Tff7b72/>

Tff7b72</button>

Tff7b72<Teleport Te6edf3to=Ta5d6ff"Ta5d6ffbodyTa5d6ff"Tff7b72>

Tff7b72<div

Te6edf3v-if=Ta5d6ff"Ta5d6ffengineMenuOpenTa5d6ff"

Te6edf3ref=Ta5d6ff"Ta5d6ffengineMenuPanelTa5d6ff"

Te6edf3v-click-outside=Ta5d6ff"Ta5d6ffcloseEngineMenuTa5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6fffixed z-200 w-56 overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg dark:border-zinc-700 dark:bg-zinc-900Ta5d6ff"

Te6edf3:style=Ta5d6ff"Ta5d6ffengineMenuStyleTa5d6ff"

Te6edf3role=Ta5d6ff"Ta5d6fflistboxTa5d6ff"

Te6edf3:aria-label=Ta5d6ff"Te6edf3$tTa5d6ff(Ta5d6ff'Ta5d6ffvisualiser.engineTa5d6ff'Ta5d6ff)Ta5d6ff"

Tff7b72>

Tff7b72<button

Te6edf3v-for=Ta5d6ff"Ta5d6ffopt in engineOptionsTa5d6ff"

Te6edf3:key=Ta5d6ff"Ta5d6ffopt.valueTa5d6ff"

Te6edf3type=Ta5d6ff"Ta5d6ffbuttonTa5d6ff"

Te6edf3role=Ta5d6ff"Ta5d6ffoptionTa5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffflex w-full items-center justify-between gap-2 px-3 py-2.5 text-left text-xs font-semibold transition-colors hover:bg-gray-100 dark:hover:bg-zinc-800Ta5d6ff"

Te6edf3:class=Ta5d6ff"

Ta5d6ff preferredRenderer === opt.value

? Ta5d6ff'Ta5d6ffbg-blue-50 text-blue-700 dark:bg-blue-950/40 dark:text-blue-300Ta5d6ff'

Ta5d6ff : Ta5d6ff'Ta5d6fftext-gray-800 dark:text-zinc-100Ta5d6ff'

Ta5d6ff Ta5d6ff"

Te6edf3:aria-selected=Ta5d6ff"Ta5d6ffpreferredRenderer === opt.value ? Ta5d6ff'Ta5d6fftrueTa5d6ff'Ta5d6ff : Ta5d6ff'Ta5d6fffalseTa5d6ff'Ta5d6ff"

@click.Te6edf3stop=Ta5d6ff"Ta5d6ffselectEngine(opt.value)Ta5d6ff"

Tff7b72>

Tff7b72<span Te6edf3class=Ta5d6ff"Ta5d6ffmin-w-0 flex-1Ta5d6ff"Tff7b72>{{ opt.label }}Tff7b72</span>

Tff7b72<MaterialDesignIcon

Te6edf3v-if=Ta5d6ff"Ta5d6ffpreferredRenderer === opt.valueTa5d6ff"

Te6edf3icon-name=Ta5d6ff"Ta5d6ffcheckTa5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffw-4 h-4 shrink-0Ta5d6ff"

Tff7b72/>

Tff7b72</button>

Tff7b72</div>

Tff7b72</Teleport>

Tff7b72</div>

Tff7b72<div

Te6edf3class=Ta5d6ff"Ta5d6ffmin-w-0 rounded-xl px-3 py-2 border border-gray-100 dark:border-zinc-700/50 bg-gray-50/60 dark:bg-zinc-800/40Ta5d6ff"

Tff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"Ta5d6fftext-[10px] font-bold text-gray-500 dark:text-zinc-500 uppercase tracking-wider mb-0.5Ta5d6ff"

Tff7b72>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6fftext-xs font-bold text-gray-800 dark:text-zinc-100 tabular-numsTa5d6ff"Tff7b72>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex items-center justify-betweenTa5d6ff"Tff7b72>

Tff7b72<label

Te6edf3for=Ta5d6ff"Ta5d6ffauto-reloadTa5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6fftext-sm font-semibold text-gray-700 dark:text-zinc-300 cursor-pointerTa5d6ff"

Tff7b72>{{ Te6edf3$t("visualiser.auto_update") }}Tff7b72</label

>

Tff7b72<Toggle

Te6edf3id=Ta5d6ff"Ta5d6ffauto-reloadTa5d6ff"

Te6edf3:model-value=Ta5d6ff"Ta5d6ffautoReloadTa5d6ff"

@Te6edf3update:model-value=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffupdate:autoReloadTa5d6ff'Ta5d6ff, Te6edf3$eventTa5d6ff)Ta5d6ff"

Tff7b72/>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex items-center justify-betweenTa5d6ff"Tff7b72>

Tff7b72<label

Te6edf3for=Ta5d6ff"Ta5d6ffenable-physicsTa5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6fftext-sm font-semibold text-gray-700 dark:text-zinc-300 cursor-pointerTa5d6ff"

Tff7b72>{{ Te6edf3$t("visualiser.live_layout") }}Tff7b72</label

>

Tff7b72<Toggle

Te6edf3id=Ta5d6ff"Ta5d6ffenable-physicsTa5d6ff"

Te6edf3:model-value=Ta5d6ff"Ta5d6ffenablePhysicsTa5d6ff"

@Te6edf3update:model-value=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffupdate:enablePhysicsTa5d6ff'Ta5d6ff, Te6edf3$eventTa5d6ff)Ta5d6ff"

Tff7b72/>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffspace-y-2Ta5d6ff"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex items-center justify-between gap-2Ta5d6ff"Tff7b72>

Tff7b72<label

Te6edf3for=Ta5d6ff"Ta5d6ffhop-filter-sliderTa5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6fftext-sm font-semibold text-gray-700 dark:text-zinc-300 cursor-pointerTa5d6ff"

Tff7b72>{{ Te6edf3$t("visualiser.max_hops_filter") }}Tff7b72</label

>

Tff7b72<input

Te6edf3id=Ta5d6ff"Ta5d6ffhop-max-hops-inputTa5d6ff"

Te6edf3type=Ta5d6ff"Ta5d6fftextTa5d6ff"

Te6edf3inputmode=Ta5d6ff"Ta5d6ffnumericTa5d6ff"

Te6edf3autocomplete=Ta5d6ff"Ta5d6ffoffTa5d6ff"

Te6edf3maxlength=Ta5d6ff"Ta5d6ff4Ta5d6ff"

Te6edf3:aria-label=Ta5d6ff"Te6edf3$tTa5d6ff(Ta5d6ff'Ta5d6ffvisualiser.max_hops_filterTa5d6ff'Ta5d6ff)Ta5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffw-13 shrink-0 rounded-lg border border-gray-200 bg-white px-1.5 py-1 text-center text-xs font-bold text-blue-600 tabular-nums shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-1 focus:ring-blue-500/40 dark:border-zinc-600 dark:bg-zinc-800 dark:text-blue-400 dark:focus:border-blue-500Ta5d6ff"

Te6edf3:value=Ta5d6ff"Ta5d6ffhopMaxInputShownTa5d6ff"

Te6edf3:placeholder=Ta5d6ff"Te6edf3$tTa5d6ff(Ta5d6ff'Ta5d6ffvisualiser.allTa5d6ff'Ta5d6ff)Ta5d6ff"

@Te6edf3focus=Ta5d6ff"Ta5d6ffonHopMaxInputFocusTa5d6ff"

@Te6edf3input=Ta5d6ff"Ta5d6ffonHopMaxInputInputTa5d6ff"

@Te6edf3blur=Ta5d6ff"Ta5d6ffonHopMaxInputBlurTa5d6ff"

Tff7b72/>

Tff7b72</div>

Tff7b72<input

Te6edf3id=Ta5d6ff"Ta5d6ffhop-filter-sliderTa5d6ff"

Te6edf3type=Ta5d6ff"Ta5d6ffrangeTa5d6ff"

Te6edf3min=Ta5d6ff"Ta5d6ff0Ta5d6ff"

Te6edf3:max=Ta5d6ff"Ta5d6ffhopSliderPosAllTa5d6ff"

Te6edf3step=Ta5d6ff"Ta5d6ff1Ta5d6ff"

Te6edf3:value=Ta5d6ff"Ta5d6ffhopSliderUiPosTa5d6ff"

Te6edf3:aria-valuetext=Ta5d6ff"Ta5d6ffhopSliderAriaTextTa5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffw-full h-2 rounded-lg appearance-none cursor-pointer bg-gray-200 dark:bg-zinc-700 accent-blue-600 dark:accent-blue-500Ta5d6ff"

@Te6edf3input=Ta5d6ff"Ta5d6ffonHopSliderInputTa5d6ff"

Tff7b72/>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffgrid grid-cols-2 gap-3 pt-2Ta5d6ff"Tff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"Ta5d6ffbg-gray-50/50 dark:bg-zinc-800/50 rounded-xl p-3 border border-gray-100 dark:border-zinc-700/50Ta5d6ff"

Tff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"Ta5d6fftext-[10px] font-bold text-gray-500 dark:text-zinc-500 uppercase tracking-wider mb-1Ta5d6ff"

Tff7b72>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6fftext-lg font-bold text-blue-600 dark:text-blue-400Ta5d6ff"Tff7b72>{{ nodeCount }}Tff7b72</div>

Tff7b72</div>

Tff7b72<div

Te6edf3class=Ta5d6ff"Ta5d6ffbg-gray-50/50 dark:bg-zinc-800/50 rounded-xl p-3 border border-gray-100 dark:border-zinc-700/50Ta5d6ff"

Tff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"Ta5d6fftext-[10px] font-bold text-gray-500 dark:text-zinc-500 uppercase tracking-wider mb-1Ta5d6ff"

Tff7b72>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6fftext-lg font-bold text-emerald-600 dark:text-emerald-400Ta5d6ff"Tff7b72>{{ edgeCount }}Tff7b72</div>

Tff7b72</div>

Tff7b72<div

Te6edf3class=Ta5d6ff"Ta5d6ffbg-zinc-950/5 dark:bg-white/5 rounded-xl p-3 border border-gray-100 dark:border-zinc-700/50Ta5d6ff"

Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6fftext-[10px] font-bold text-gray-500 dark:text-zinc-500 uppercase tracking-wider mb-2Ta5d6ff"Tff7b72>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex items-center gap-4Ta5d6ff"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex items-center gap-1.5Ta5d6ff"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffw-2 h-2 rounded-full bg-emerald-500Ta5d6ff"Tff7b72>Tff7b72</div>

Tff7b72<span Te6edf3class=Ta5d6ff"Ta5d6fftext-xs font-bold text-gray-700 dark:text-zinc-300Ta5d6ff"

Tff7b72>{{ onlineInterfaceCount }} {{ Te6edf3$t("visualiser.online") }}Tff7b72</span

>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex items-center gap-1.5Ta5d6ff"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffw-2 h-2 rounded-full bg-red-500Ta5d6ff"Tff7b72>Tff7b72</div>

Tff7b72<span Te6edf3class=Ta5d6ff"Ta5d6fftext-xs font-bold text-gray-700 dark:text-zinc-300Ta5d6ff"

Tff7b72>{{ offlineInterfaceCount }} {{ Te6edf3$t("visualiser.offline") }}Tff7b72</span

>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffsm:ml-auto w-full sm:w-auto pointer-events-autoTa5d6ff"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffrelative groupTa5d6ff"Tff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"Ta5d6ffabsolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400 group-focus-within:text-blue-500 transition-colorsTa5d6ff"

Tff7b72>

Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"Ta5d6ffmagnifyTa5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffw-4 h-4Ta5d6ff" Tff7b72/>

Tff7b72</div>

Tff7b72<input

Te6edf3:value=Ta5d6ff"Ta5d6ffsearchQueryTa5d6ff"

Te6edf3type=Ta5d6ff"Ta5d6fftextTa5d6ff"

Te6edf3:placeholder=Ta5d6ff"Te6edf3$tTa5d6ff(Ta5d6ff'Ta5d6ffvisualiser.search_nodes_placeholderTa5d6ff'Ta5d6ff, { count: nodeCount })Ta5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffblock w-full sm:w-64 pl-9 pr-10 py-2.5 sm:py-3 bg-white/90 dark:bg-zinc-900/90 border border-gray-200/50 dark:border-zinc-800/50 rounded-2xl text-xs font-semibold focus:outline-hidden focus:ring-2 focus:ring-blue-500/50 sm:focus:w-80 md:max-lg:focus:w-72 lg:focus:w-80 transition-all dark:text-zinc-100 shadow-xsTa5d6ff"

@Te6edf3input=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffupdate:searchQueryTa5d6ff'Ta5d6ff, Te6edf3$event.target.valueTa5d6ff)Ta5d6ff"

Tff7b72/>

Tff7b72<button

Te6edf3v-if=Ta5d6ff"Ta5d6ffsearchQueryTa5d6ff"

Te6edf3type=Ta5d6ff"Ta5d6ffbuttonTa5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffabsolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-zinc-200 transition-colorsTa5d6ff"

Te6edf3:aria-label=Ta5d6ff"Te6edf3$tTa5d6ff(Ta5d6ff'Ta5d6ffvisualiser.clear_searchTa5d6ff'Ta5d6ff)Ta5d6ff"

@Te6edf3click=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffupdate:searchQueryTa5d6ff'Ta5d6ff, Ta5d6ff'Ta5d6ff'Ta5d6ff)Ta5d6ff"

Tff7b72>

Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"Ta5d6ffcloseTa5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffw-4 h-4Ta5d6ff" Tff7b72/>

Tff7b72</button>

Tff7b72</div>

Tff7b72</template>

Tff7b72<scriptTff7b72>

import Toggle from "../../forms/Toggle.vue";

import MaterialDesignIcon from "../../MaterialDesignIcon.vue";

import { clampFloatingToViewport } from "../../../js/clampFloatingToViewport.js";

import { HOP_SLIDER_POS_ALL, hopSliderPosToMaxHops, hopMaxHopsToSliderPos } from "./hopMaxFilterSliderMap.js";

const ENGINE_VALUES = ["auto", "webgl", "vis"];

export default {

name: "NetworkVisualiserToolbar",

components: { Toggle, MaterialDesignIcon },

props: {

isShowingControls: { type: Boolean, default: true },

isUpdating: { type: Boolean, default: false },

isLoading: { type: Boolean, default: false },

autoReload: { type: Boolean, default: false },

enablePhysics: { type: Boolean, default: true },

hopMaxFilter: {

default: 4,

validator(v) {

return v === null || (typeof v === "number" && Number.isFinite(v) && v >= 0 && v <= 128);

},

nodeCount: { type: Number, default: 0 },

edgeCount: { type: Number, default: 0 },

onlineInterfaceCount: { type: Number, default: 0 },

offlineInterfaceCount: { type: Number, default: 0 },

searchQuery: { type: String, default: "" },

preferredRenderer: {

type: String,

default: "auto",

validator(v) {

return ENGINE_VALUES.includes(v);

},

engineMode: {

type: String,

default: "checking",

validator(v) {

return ["checking", "wasm", "fallback", "webgl"].includes(v);

},

fps: { type: Number, default: 0 },

},

emits: [

"update:isShowingControls",

"update:autoReload",

"update:enablePhysics",

"update:hopMaxFilter",

"update:searchQuery",

"update:preferredRenderer",

"manual-update",

],

data() {

return {

hopMaxInputDraft: null,

engineMenuOpen: false,

engineMenuPosition: null,

};

},

computed: {

hopSliderPosAll() {

return HOP_SLIDER_POS_ALL;

},

hopSliderUiPos() {

return hopMaxHopsToSliderPos(this.hopMaxFilter);

},

hopMaxInputShown() {

if (this.hopMaxInputDraft !== null) return this.hopMaxInputDraft;

if (this.hopMaxFilter === null) return "";

return String(this.hopMaxFilter);

},

hopSliderAriaText() {

if (this.hopMaxFilter === null) return this.$t("visualiser.all");

return String(this.hopMaxFilter);

},

engineOptions() {

return [

{ value: "auto", label: this.$t("visualiser.renderer_option_auto") },

{ value: "webgl", label: this.$t("visualiser.renderer_option_webgl") },

{ value: "vis", label: this.$t("visualiser.renderer_option_vis") },

];

},

engineTriggerLabel() {

if (this.preferredRenderer === "webgl") return this.$t("visualiser.renderer_option_webgl_short");

if (this.preferredRenderer === "vis") return this.$t("visualiser.renderer_option_vis_short");

return this.$t("visualiser.renderer_option_auto_short");

},

engineSelectTitle() {

if (this.engineMode === "webgl") return this.$t("visualiser.engine_webgl_hint");

if (this.engineMode === "wasm") return this.$t("visualiser.engine_wasm_hint");

if (this.engineMode === "fallback") return this.$t("visualiser.engine_fallback_hint");

return this.$t("visualiser.renderer_desc");

},

engineSelectClass() {

if (this.engineMode === "webgl") return "text-sky-600 dark:text-sky-400";

if (this.engineMode === "wasm") return "text-emerald-600 dark:text-emerald-400";

if (this.engineMode === "fallback") return "text-amber-600 dark:text-amber-400";

return "text-gray-800 dark:text-zinc-100";

},

fpsDisplay() {

const n = Number(this.fps);

if (!Number.isFinite(n) || n <= 0) return "--";

return String(Math.round(n));

},

engineMenuStyle() {

if (!this.engineMenuPosition) return {};

const style = {

left: `${this.engineMenuPosition.left}px`,

top: `${this.engineMenuPosition.top}px`,

};

if (this.engineMenuPosition.maxHeight != null) {

style.maxHeight = `${this.engineMenuPosition.maxHeight}px`;

style.overflowY = "auto";

}

return style;

},

watch: {

isShowingControls(open) {

if (!open) this.closeEngineMenu();

},

beforeUnmount() {

this.closeEngineMenu();

},

methods: {

toggleEngineMenu() {

if (this.engineMenuOpen) {

this.closeEngineMenu();

return;

}

this.openEngineMenu();

},

openEngineMenu() {

this.engineMenuOpen = true;

this.$nextTick(() => this.positionEngineMenu());

},

closeEngineMenu() {

this.engineMenuOpen = false;

this.engineMenuPosition = null;

},

positionEngineMenu() {

const trigger = this.$el?.querySelector?.("#visualiser-engine-select");

if (!trigger) return;

const rect = trigger.getBoundingClientRect();

this.engineMenuPosition = {

left: Math.max(8, rect.left),

top: rect.bottom + 6,

maxHeight: null,

};

this.$nextTick(() => {

const panel = this.$refs.engineMenuPanel;

if (!panel) return;

const pr = panel.getBoundingClientRect();

const { left, top, maxHeight } = clampFloatingToViewport(pr.left, pr.top, pr.width, pr.height);

this.engineMenuPosition = { left, top, maxHeight };

});

},

selectEngine(value) {

if (ENGINE_VALUES.includes(value)) {

this.$emit("update:preferredRenderer", value);

}

this.closeEngineMenu();

},

onHopSliderInput(e) {

const v = hopSliderPosToMaxHops(Number(e.target.value));

this.$emit("update:hopMaxFilter", v);

},

onHopMaxInputFocus() {

this.hopMaxInputDraft = this.hopMaxFilter === null ? "" : String(this.hopMaxFilter);

},

onHopMaxInputInput(e) {

const raw = e.target.value.replace(/\D/g, "");

this.hopMaxInputDraft = raw;

if (raw === "") return;

const n = parseInt(raw, 10);

if (!Number.isFinite(n)) return;

const clamped = Math.max(0, Math.min(128, Math.round(n)));

this.$emit("update:hopMaxFilter", clamped);

this.hopMaxInputDraft = String(clamped);

},

onHopMaxInputBlur() {

const d = this.hopMaxInputDraft;

this.hopMaxInputDraft = null;

if (d === null) return;

const trimmed = (d || "").trim();

if (trimmed === "") {

this.$emit("update:hopMaxFilter", null);

return;

}

const n = parseInt(trimmed, 10);

if (!Number.isFinite(n)) return;

this.$emit("update:hopMaxFilter", Math.max(0, Math.min(128, Math.round(n))));

},

};

Tff7b72</script>